<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜品管理</title>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/x-layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/url.js"></script>
</head>
<body>
<div style="margin-top: 20px">
    <a class='layui-btn layui-btn-warm layui-btn-radius' style='margin-left: 20px' onclick="search1()"><i
            class="layui-icon layui-icon-search"></i></a>
    <input class='layui-input' id='foodName' placeholder='通过菜名查找' style='width: 180px;float:left;margin-left: 20px'
           type='text' name='search'/>
</div>
<table id="fooddetail" lay-filter="fooddetail" style="width: 50px;height: auto"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use(['table', 'layer'], function () {
        var totalCount;
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.$;
        window.search1 = function () {
            layui.table.reload('fooddetail', {
                where: {
                    search: document.getElementById("foodName").value
                },
                page: {
                    curr: 1
                }
            });
        }
        //监听工具条
        table.on('tool(fooddetail)', function (obj) {
            var data1 = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index, res) {
                    $.post("../deleteByFoodClassid.do", {"id": data1.foodId, "img": data1.foodImage}, function (data) {
                        if (data.success) {
                            layer.msg(data.message, {icon: 1, time: 2000, offset: '100px'})
                            layer.close(index);
                            var limit = $(".layui-laypage-limits").find("option:selected").val();
                            totalCount = totalCount - 1;
                            if (totalCount % limit === 0) {
                                var yema = totalCount / limit;
                                layui.table.reload('fooddetail', {page: {curr: yema}});
                            } else {
                                layui.table.reload('fooddetail');
                            }
                        } else {
                            layer.msg(data.message, {icon: 2, time: 2000, anim: 6, offset: '100px'})
                            layer.close(index);
                            layui.table.reload('fooddetail');
                        }
                    }, "json");
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                x_admin_show("菜品编辑", "fooddetail-edit.html?foodId=" + data1.foodId, 500, 500);
            }
        });
        table.render({
            elem: '#fooddetail'
            ,
            height: 350
            ,
            url: '../findAllDetail.do' //数据接口
            ,
            page: true //开启分页
            ,
            cellMinWidth: 80
            ,
            limit: 5
            ,
            where: {
                search: document.getElementById("foodName").value
            }
            ,
            limits: [5, 10, 15, 20]
            ,
            title: '菜品管理'
            ,
            width: '800'
            ,
            toolbar: "<div><a class='layui-btn layui-btn-normal layui-btn-sm'style='margin-left: 20px' onclick='x_admin_show(\"菜品添加\",\"fooddetail-add.html\",500,500);'><i class=\"layui-icon layui-icon-add-1\"></i></a></div>"
            ,
            defaultToolbar: ['filter', 'print', 'exports', {
                title: '菜品管理' //标题
                , layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
                , icon: 'layui-icon-tips' //图标类名
            }]
            ,
            cols: [[ //表头
                {field: 'foodId', title: '编号', sort: true, fixed: 'left'}
                , {field: 'foodName', title: '菜名'}
                , {
                    field: 'className', title: '所属菜系', templet: function (d) {
                        return '<div>' + d.foodclass.className + '</div>';
                        //return '<div>占位</div>';
                    }
                }
                , {field: 'foodPrice', title: '价格', sort: true}
                , {field: 'foodEvaluate', title: '推荐星级', sort: true}
                , {
                    field: 'foodImage', title: '菜品图片', templet: function (d) {
                        return '<div><img style="width: 120px;height: 80px" src="' + foodImgURL + d.foodImage + '"/></div>';
                    }
                }
                , {fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo'}
            ]]
            ,
            done: function (res, curr, count) {
                totalCount = count;
            }
        });
    });
</script>
<script src="../js/mouse.js"></script>
</body>
</html>